<template>
	<view>
		<dsl-navbar title="提现账户" bgTopImg="white" isBack=""></dsl-navbar>
		<view class="withdraw_body animation-scale-up">
			<view>
				<view class="margin  padding-bottom solid-bottom">
					<view>支付宝账号</view>
					<view class="margin-top-xs">
						<input type="text" value="" placeholder="请输入您的支付宝账号" placeholder-style="color:#BAB2D4"
							v-model="account" />
					</view>
				</view>
				<view class="margin  ">
					<view>真实姓名</view>
					<view class="margin-top-xs">
						<input type="text" value="" placeholder="请输入您的真实姓名" placeholder-style="color:#BAB2D4"
							v-model="realName" />
					</view>
				</view>
			</view>
		</view>
		<view class="hint padding margin ">
			<view class="text-xl">温馨提示：</view>
			<view class="margin-top">
				1、确保支付账号填写无误，否则无法打款
			</view>
			<view class="margin-top">
				2、真实姓名要与支付宝认证的姓名一致
			</view>
		</view>
		<view class="submit" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				account: '', //账户
				realName: '', //姓名
				type: '', //支付宝
				isWithdraw: true, //默认添加
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {
			this.getAccount() //查询账户
		},
		onShow() {},
		watch: {
			accountData(res) {
				console.log('[提现账户]', res);
				let v = this
				v.realName = res.realName
				v.account = res.account
				if (v.account) {
					v.isWithdraw = false
				}
			}
		},

		methods: {
			/**
			 * @description vuex
			 * addAccount 增加账户
			 * updateAccount 更新账户
			 * removeAccount 删除账户
			 * getAccount 修改账户
			 */
			...mapActions('money', ['addAccount', 'updateAccount', 'removeAccount', 'getAccount']),
			//提现账户绑定
			submit() {
				let v = this
				if (!v.account) {
					v.$tools.showToast('账号不能为空')
					return
				}
				if (!v.realName) {
					v.$tools.showToast('真实姓名不能为空')
					return
				}
				if (v.isWithdraw) { //添加账户
					v.addAccount({
						account: v.account,
						realName: v.realName,
						type: 1, //类型 1-支付宝 2-微信
					})
				} else { //修改账户
					v.updateAccount({
						account: v.account,
						realName: v.realName,
						type: 1, //类型 1-支付宝 2-微信
						id:v.accountData.id //修改那个id参数
					})
				}
			}
		},
		computed: {
			/**
			 * @description vuex money模板
			 * accountData 提现账户查询
			 */
			...mapState('money', ['accountData']),

		},
		components: {},
	}
</script>

<style>
	.withdraw_body {
		width: 710rpx;
		height: 332rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		margin: 0 auto;
		box-shadow: 1upx 3upx 30upx 3upx #EEEEEE;
		display: flex;
		align-items: center;
	}

	.hint {
		background: #FEF4DA;
		border-radius: 20rpx;
	}

	.submit {
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		line-height: 90rpx;
		border-radius: 99rpx;
		text-align: center;
		margin: 0 auto;
		color: white;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
	}
</style>
